<template>
	<view class="baseView">
		<mallOrder v-if="componentVisable[1]"></mallOrder>
		<myMall v-if="componentVisable[2]"></myMall>
		<view v-if="componentVisable[0]">
			<u-row gutter="8">
				<u-col span="3" offset="0.5">
					<u-icon name="map-fill" :label="selectedCity" label-pos="right" @click="showcityPicker()"></u-icon>
				</u-col>
				<u-col span="8.5" align="center">
					<u-search
						placeholder="输入搜索内容"
						color="#9299ff"
						v-model="searchValue"
						@search="getSearchValue"
						@custom="getSearchValue"
					></u-search>
				</u-col>
			</u-row>
			<u-swiper :list="bannerList" style="margin: 16rpx;"></u-swiper>
			<u-section title="美食分类" lineColor="#4267de" :right="false"></u-section>
			<u-grid :col="5" :border="false">
				<u-grid-item v-for="(item, index) in mallList" :key="index" :index="index" @click="onItemClick(index)">
					<u-icon
						:name="item.mallImg"
						:label="item.name"
						labelPos="bottom"
						size="60"
						margin-top="8rpx"
						label-size="28"
					></u-icon>
				</u-grid-item>
			</u-grid>
			<u-section title="推荐好店" lineColor="#4267de" :right="false" style="margin: 16rpx;"></u-section>

			<u-grid :col="2" :border="false">
				<u-grid-item v-for="(item, index) in recommendList" :key="index">
					<view class="myCardBox" @click="showDetail(item.id, item.name)">
						<u-image :src="item.image" width="300rpx" height="200rpx"></u-image>
						<view style="font-weight: bold;">{{ item.name }}</view>
						<view style="padding: 5rpx;">用户评分:{{ item.score }}</view>
						<view>三小时销量:{{ item.saleNum3hour }}</view>
					</view>
				</u-grid-item>
			</u-grid>
			<u-sticky z-index="100">
				<u-section
					title="附近店家"
					lineColor="#4267de"
					:right="false"
					style="margin: 16rpx;"
					class="sticky"
				></u-section>
			</u-sticky>
			<uni-list style="margin-bottom: 100rpx;">
				<view
					class="myCardBox"
					v-for="(item, index) in nearbyList"
					:key="index"
					@click="showDetail(item.id, item.name)"
				>
					<u-row :gutter="16">
						<u-col span="2"><u-image :src="item.image" width="100rpx" height="100rpx"></u-image></u-col>
						<u-col span="10">
							<view style="font-weight: bold;">{{ item.name }}</view>
							<u-rate :disabled="true" :current="item.score" min-count="5" :gutter="5"></u-rate>
							<view class="myflexRow">
								<view>人均消费:{{ item.saleQuantity }}</view>
								<view>平均送达时间: {{ item.deliveryTime }}</view>
							</view>
							<view class="myflexRow">
								<view>店家距离:{{ item.distance }}</view>
								<view>三小时销量:{{ item.saleNum3hour }}</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText"></u-loadmore>
			</uni-list>
		</view>
		<u-subsection
			:list="list"
			:current="current"
			style="position: fixed; width: 100%; bottom: 0rpx;border:0rpx;justify-content: space-around;padding: 0rpx;border-radius: 0rpx;"
			@change="changePage"
		></u-subsection>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{ name: '主页' }, { name: '订单' }, { name: '我的' }],
			componentVisable: [true, false, false],
			current: 0,
			searchValue: '',
			selectedCity: '南京',
			mallList: [],
			bannerList: [],
			recommendList: [],
			nearbyList: [],
			pageNum: 1,
			pageSize: 8,
			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			}
		};
	},
	methods: {
		changePage: function(index) {
			console.log(index);
			//两种思路：使用组件,控制每个组件的隐藏和显示;每个界面放个底部tab,指定选中tab,配合路由框架
			this.current = index;
			switch (index) {
				case 0:
					this.componentVisable = [true, false, false];
					break;
				case 1:
					this.componentVisable = [false, true, false];
					break;
				case 2:
					this.componentVisable = [false, false, true];
					break;
			}
		},
		//展示城市选择器
		showcityPicker: function() {
			uni.navigateTo({
				url: '../cityIndexList/cityIndexList'
			});
		},
		//对于搜索框,需要将v-model中的属性值和两个方法做绑定，按下键盘按钮或者是点击搜索框右侧文字均可触发
		getSearchValue: function() {},
		getSelectedCity: function() {
			uni.getStorage({
				key: 'selectedCity',
				success: res => {
					//使用异步方法则此处必须使用箭头函数,箭头函数中没有对象,才能找到相应的Vue对象，修改对应值，否则使用同步方法
					console.log(res.data);
					this.selectedCity = res.data;
				}
			});
		},
		getMallServer: function() {
			this.$u.get('/prod-api/api/takeout/theme/list').then(res => {
				res.data.forEach(item => {
					let mallItem = {};
					//注意baseUrl
					mallItem.mallImg = this.$u.http.config.baseUrl.concat(item.imgUrl);
					mallItem.name = item.themeName;
					this.mallList.push(mallItem);
				});
			});
			console.log(this.mallList);
		},
		getMallBanner: function() {
			this.$u.get('/prod-api/api/takeout/rotation/list').then(res => {
				res.rows.forEach(item => {
					let temp = {};
					temp.id = item.id;
					temp.title = item.advTitle;
					temp.image = this.$u.http.config.baseUrl.concat(item.advImg);
					this.bannerList.push(temp);
				});
			});
		},
		getRecommendShop: function() {
			this.$u.get('/prod-api/api/takeout/seller/list?recommend=Y').then(res => {
				res.rows.forEach(item => {
					let tempUrl = this.$u.http.config.baseUrl.concat(item.imgUrl);
					item.image = tempUrl;
					this.recommendList.push(item);
				});
			});
		},
		getNearbyMallList() {
			this.status = 'loading';
			this.$u
				.get('/prod-api/api/takeout/seller/near', { pageNum: this.pageNum, pageSize: this.pageSize })
				.then(res => {
					res.rows.forEach(item => {
						let tempUrl = this.$u.http.config.baseUrl.concat(item.imgUrl);
						item.image = tempUrl;
						this.nearbyList.push(item);
					});
					this.status = 'loadmore';
				});
		},
		showDetail: function(id, name) {
			//此处应该是跳转到详情界面,先试用Toast代替
			uni.showToast({
				title: `这是${name}`,
				duration: 500,
				success() {
					uni.navigateTo({
						url: `mallDetail/mallDetail?id=${id}`
					});
				}
			});
		},
		onItemClick(index) {
			//index需要自增1
			++index;
			uni.navigateTo({
				url: `mallSearch/mallSearch?themeId=${index}`
			});
		}
	},
	onLoad() {
		this.getSelectedCity();
		this.getMallServer();
		this.getMallBanner();
		this.getRecommendShop();
		this.getNearbyMallList();
	},
	onReachBottom() {
		if (this.pageNum <= 2) {
			this.pageNum = ++this.pageNum;
			this.getNearbyMallList();
		} else {
			this.status = 'nomore';
		}
	}
};
</script>

<style scoped lang="scss">
.mygrid {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0px;
}
</style>
